<template>
    <div class="add_detail_comtainer">
        <HeaderTop :goBack="true" :headTitle="'搜索地址'"></HeaderTop>
        <section>
            <div class="add_detail">
                <input type="text" placeholder="请输入小区/写字楼/学校等" v-model="inputAdress">
        		<button @click="inputThing">确认</button>
            </div>
            <div class="warnpart">
                {{text}}
            </div>
            <div class="point" v-show="warning">
        		<p>找不到地址？</p>
        		<p>请尝试输入小区、写字楼或学校名</p>
        		<p>详细地址（如门牌号）可稍后输入哦。</p>
        	</div>
        </section>
        <section class="poisearch_container" v-show="adressList">
            <ul>
                <li v-for="(item, index) in adressList" @click="listClick(index)" :key="index">
                    <p>{{item.name}}</p>
        			<p>{{item.address}}</p>
                </li>
            </ul>
        </section>
    </div>
</template>

<script>
import HeaderTop from '@src/components/header/HeaderTop';
import { searchNearby} from '@src/api/getData'
import {mapState,mapActions} from 'vuex';
export default {
    components:{
        HeaderTop
    },
    computed:{
        ...mapState(['addAddress'])
    },
    data(){
        return {
            inputAdress:'',
            warning:true,
            warnText:'为了满足商家的送餐要求，建议您从列表中选择地址,疫情期间请请勤洗手，注意个人卫生',
            text:'',
            adressList:[]
        }
    },
    created(){
        this.inputAdress = this.addAddress? this.addAddress : this.inputAdress;
    },
    mounted(){
        this.text=this.warnText;
        this.doTextAnimation();
    },
    methods:{
        ...mapActions(['saveAddressName']),
        inputThing(){
            searchNearby(this.inputAdress).then(res=>{
                this.warning=true;
                this.adressList = res;
                if(this.adressList.length > 0){
                    this.warning=false;
                    if(this.inputAdress == ''){
                        this.adressList=[];
                        this.warning=true;
                    }
                }

            })
        },
        listClick(index){
            this.saveAddressName(this.adressList[index].name);
            this.$router.go(-1);
        },
        doTextAnimation(){
            let length=this.warnText.length;
            let i=0;
            setInterval(()=>{
                this.text=this.warnText.substring(i);
                i++;
                if(i>=length){
                    i=0;
                }
            },500)
        }
    }
}
</script>

<style lang="scss" scoped>
@import '~@styl/mixin.scss';
.add_detail_comtainer{
    padding-top: 1.95rem;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 206;
    background-color: #f2f2f2;
    .add_detail{
        @include fj;
        background: #fff;
        padding: 0.5rem;
        input{
            width: 11.8rem;
            padding: 0.4rem;
            background: #f2f2f2;
            border: 0.025rem solid #ddd;
            border-radius: 5px;
            font-size: 0.6rem;
        }
        button{
            width: 2.8rem;
            background: $blue;
            @include sc(0.7rem,#fff);
            border-radius: 5px;
        }
    }
    .warnpart{
        white-space: nowrap;
        @include sc(0.62rem,#FF883F);
        background: #FFF6E4;
        padding: .2rem 0.5rem;
    }
    .point{
        @include center;
        width: 100%;
        p{
            width: 100%;
            text-align: center;
            @include sc(0.7rem,#969696);
            margin-bottom:.4rem;
        }
    }
    .poisearch_container{
        background: #f2f2f2;
        li{
            border-bottom:1px solid #ccc;
            padding:.4rem;
            p{
    			@include sc(.65rem,#969696);
    		}
    		p:first-child{
    			margin-bottom:.2rem;
    		}
        }
        li:last-child{
    		border:0;
    	}
    }
}
</style>